<template>
  <div class="users-container">
    <div class="page-header">
      <h1>用户管理</h1>
      <button class="add-button" @click="showAddUserDialog = true">
        <i class="fa fa-plus"></i>
        添加用户
      </button>
    </div>
    
    <!-- 搜索和筛选 -->
    <div class="search-filter">
      <div class="search-box">
        <i class="fa fa-search"></i>
        <input 
          v-model="searchQuery" 
          type="text" 
          placeholder="搜索用户名、邮箱"
          @input="handleSearch"
        />
      </div>
      <div class="filter-group">
        <select v-model="filterRole" @change="handleFilter">
          <option value="">全部角色</option>
          <option value="admin">管理员</option>
          <option value="editor">编辑</option>
          <option value="user">普通用户</option>
        </select>
        <select v-model="filterStatus" @change="handleFilter">
          <option value="">全部状态</option>
          <option value="active">活跃</option>
          <option value="suspended">暂停</option>
          <option value="deleted">已删除</option>
        </select>
      </div>
    </div>
    
    <!-- 用户列表 -->
    <div class="users-table-container">
      <table class="users-table">
        <thead>
          <tr>
            <th><input v-model="selectAll" type="checkbox" @change="toggleSelectAll" /></th>
            <th>ID</th>
            <th>用户名</th>
            <th>邮箱</th>
            <th>角色</th>
            <th>状态</th>
            <th>关注数</th>
            <th>粉丝数</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="user in filteredUsers" :key="user.id">
            <td><input v-model="selectedUsers" type="checkbox" :value="user.id" /></td>
            <td>{{ user.id }}</td>
            <td class="user-info">
              <img :src="user.avatar || '/src/assets/logo.png'" alt="头像" class="user-avatar" />
              <span>{{ user.username }}</span>
            </td>
            <td>{{ user.email }}</td>
            <td>
              <span class="role-badge" :class="user.role">
                {{ user.role === 'admin' ? '管理员' : user.role === 'editor' ? '编辑' : '普通用户' }}
              </span>
            </td>
            <td>
              <span class="status-badge" :class="user.status">
                {{ user.status === 'active' ? '活跃' : user.status === 'suspended' ? '暂停' : '已删除' }}
              </span>
            </td>
            <td>{{ user.following }}</td>
            <td>{{ user.followers }}</td>
            <td>{{ formatDate(user.createdAt) }}</td>
            <td class="action-buttons">
                <button class="edit-button" @click="editUser(user)">
                  <i class="fa fa-edit"></i>
                  编辑
                </button>
                <button class="status-button" :class="user.status" @click="changeStatus(user)">
                  <i class="fa fa-power-off"></i>
                  状态
                </button>
                <button v-if="user.role !== 'admin'" class="delete-button" @click="deleteUser(user)">
                  <i class="fa fa-trash"></i>
                  删除
                </button>
              </td>
          </tr>
        </tbody>
      </table>
      
      <!-- 空状态 -->
      <div v-if="filteredUsers.length === 0" class="empty-state">
        <i class="fa fa-search"></i>
        <p>暂无用户数据</p>
      </div>
    </div>
    
    <!-- 分页 -->
    <div v-if="filteredUsers.length > 0" class="pagination">
      <button :disabled="currentPage === 1" @click="currentPage = 1">
        <i class="fa fa-angle-double-left"></i>
      </button>
      <button :disabled="currentPage === 1" @click="currentPage--">
        <i class="fa fa-angle-left"></i>
      </button>
      <span class="page-info">
        第 {{ currentPage }} 页，共 {{ totalPages }} 页
      </span>
      <button :disabled="currentPage === totalPages" @click="currentPage++">
        <i class="fa fa-angle-right"></i>
      </button>
      <button :disabled="currentPage === totalPages" @click="currentPage = totalPages">
        <i class="fa fa-angle-double-right"></i>
      </button>
    </div>
    
    <!-- 添加/编辑用户对话框 -->
    <div v-if="showAddUserDialog || showEditUserDialog" class="dialog-overlay" @click="closeDialog">
      <div class="dialog" @click.stop>
        <div class="dialog-header">
          <h3>{{ showEditUserDialog ? '编辑用户' : '添加用户' }}</h3>
          <button class="close-button" @click="closeDialog">
            <i class="fa fa-times"></i>
          </button>
        </div>
        <div class="dialog-content">
          <form @submit.prevent="submitUserForm">
            <div class="form-group">
              <label>用户名</label>
              <input 
                v-model="userForm.username" 
                type="text" 
                required
                :disabled="showEditUserDialog"
              />
            </div>
            <div class="form-group">
              <label>密码</label>
              <input 
                v-model="userForm.password" 
                type="password" 
                :required="!showEditUserDialog"
                placeholder="编辑时不修改请留空"
              />
            </div>
            <div class="form-group">
              <label>邮箱</label>
              <input v-model="userForm.email" type="email" required />
            </div>
            <div class="form-group">
              <label>角色</label>
              <select v-model="userForm.role" required>
                <option value="user">普通用户</option>
                <option value="editor">编辑</option>
                <option value="admin">管理员</option>
              </select>
            </div>
            <div class="form-group">
              <label>状态</label>
              <select v-model="userForm.status" required>
                <option value="active">活跃</option>
                <option value="suspended">暂停</option>
                <option value="deleted">已删除</option>
              </select>
            </div>
            <div class="form-group">
              <label>简介</label>
              <textarea v-model="userForm.bio" rows="3"></textarea>
            </div>
            <div class="dialog-footer">
              <button type="button" class="cancel-button" @click="closeDialog">取消</button>
              <button type="submit" class="save-button">{{ showEditUserDialog ? '更新' : '添加' }}</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UsersView',
  data() {
    return {
      // 模拟用户数据
      users: [
        {
          id: 'user1',
          username: 'admin',
          password: 'admin123',
          email: 'admin@example.com',
          avatar: '/src/assets/logo.png',
          bio: '系统管理员',
          followers: 1253,
          following: 28,
          role: 'admin',
          status: 'active',
          createdAt: '2024-01-01T10:00:00Z',
        },
        {
          id: 'user2',
          username: 'user',
          password: 'user123',
          email: 'user@example.com',
          avatar: '/src/assets/logo.png',
          bio: '普通用户',
          followers: 42,
          following: 86,
          role: 'user',
          status: 'active',
          createdAt: '2024-01-02T14:30:00Z',
        },
        {
          id: 'user3',
          username: 'editor',
          password: 'editor123',
          email: 'editor@example.com',
          avatar: '/src/assets/logo.png',
          bio: '内容编辑',
          followers: 2567,
          following: 156,
          role: 'editor',
          status: 'active',
          createdAt: '2024-01-03T09:15:00Z',
        },
        {
          id: 'user4',
          username: 'creator',
          password: 'creator123',
          email: 'creator@example.com',
          avatar: '/src/assets/周杰伦.png',
          bio: '内容创作者',
          followers: 125000,
          following: 342,
          role: 'user',
          status: 'active',
          createdAt: '2024-01-04T16:45:00Z',
        },
      ],
      searchQuery: '',
      filterRole: '',
      filterStatus: '',
      selectedUsers: [],
      selectAll: false,
      showAddUserDialog: false,
      showEditUserDialog: false,
      currentPage: 1,
      itemsPerPage: 10,
      userForm: {
        id: '',
        username: '',
        password: '',
        email: '',
        bio: '',
        role: 'user',
        status: 'active',
      },
    }
  },
  computed: {
    filteredUsers() {
      let filtered = this.users
      
      // 搜索
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase()
        filtered = filtered.filter(user => 
          user.username.toLowerCase().includes(query) || 
          user.email.toLowerCase().includes(query),
        )
      }
      
      // 角色筛选
      if (this.filterRole) {
        filtered = filtered.filter(user => user.role === this.filterRole)
      }
      
      // 状态筛选
      if (this.filterStatus) {
        filtered = filtered.filter(user => user.status === this.filterStatus)
      }
      
      return filtered
    },
    paginatedUsers() {
      const start = (this.currentPage - 1) * this.itemsPerPage
      const end = start + this.itemsPerPage
      return this.filteredUsers.slice(start, end)
    },
    totalPages() {
      return Math.ceil(this.filteredUsers.length / this.itemsPerPage)
    },
  },
  methods: {
    handleSearch() {
      this.currentPage = 1
    },
    handleFilter() {
      this.currentPage = 1
    },
    toggleSelectAll() {
      if (this.selectAll) {
        this.selectedUsers = this.filteredUsers.map(user => user.id)
      } else {
        this.selectedUsers = []
      }
    },
    formatDate(dateString) {
      const date = new Date(dateString)
      return date.toLocaleString('zh-CN')
    },
    editUser(user) {
      this.userForm = { ...user }
      this.showEditUserDialog = true
    },
    changeStatus(user) {
      const newStatus = user.status === 'active' ? 'suspended' : 'active'
      if (confirm(`确定要将用户 ${user.username} 的状态更改为${newStatus === 'active' ? '活跃' : '暂停'}吗？`)) {
        // 在实际应用中，这里应该调用API
        user.status = newStatus
      }
    },
    deleteUser(user) {
      if (confirm(`确定要删除用户 ${user.username} 吗？此操作不可撤销！`)) {
        // 在实际应用中，这里应该调用API
        const index = this.users.findIndex(u => u.id === user.id)
        if (index > -1) {
          this.users.splice(index, 1)
        }
      }
    },
    closeDialog() {
      this.showAddUserDialog = false
      this.showEditUserDialog = false
      this.resetForm()
    },
    resetForm() {
      this.userForm = {
        id: '',
        username: '',
        password: '',
        email: '',
        bio: '',
        role: 'user',
        status: 'active',
      }
    },
    submitUserForm() {
      if (this.showEditUserDialog) {
        // 编辑用户
        const index = this.users.findIndex(u => u.id === this.userForm.id)
        if (index > -1) {
          // 只有在输入了密码时才更新密码
          if (!this.userForm.password) {
            delete this.userForm.password
          }
          this.users[index] = { ...this.users[index], ...this.userForm }
        }
      } else {
        // 添加用户
        const newUser = {
          ...this.userForm,
          id: 'user' + (this.users.length + 1),
          avatar: '/src/assets/logo.png',
          followers: 0,
          following: 0,
          createdAt: new Date().toISOString(),
        }
        this.users.push(newUser)
      }
      
      this.closeDialog()
    },
  },
}
</script>

<style scoped>
/* 全局变量 */
:root {
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --primary-color: #667eea;
  --secondary-color: #764ba2;
  --success-color: #2ecc71;
  --danger-color: #e74c3c;
  --warning-color: #f39c12;
  --info-color: #3498db;
  --card-bg: #ffffff;
  --text-primary: #2d3748;
  --text-secondary: #718096;
  --border-color: #e2e8f0;
  --shadow-light: 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-medium: 0 10px 15px rgba(0, 0, 0, 0.05);
  --border-radius: 12px;
  --transition-fast: all 0.2s ease;
  --transition-medium: all 0.3s ease;
}

.users-container {
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 0;
}

.page-header h1 {
  color: var(--text-primary);
  margin: 0;
  font-size: 26px;
  font-weight: 600;
}

.add-button {
  background: var(--primary-gradient);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-medium);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.add-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.add-button i {
  margin-right: 5px;
}

/* 搜索和筛选 */
.search-filter {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.search-box {
  position: relative;
  flex: 1;
  min-width: 300px;
}

.search-box i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 16px;
}

.search-box input {
  width: 100%;
  padding: 12px 16px 12px 42px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  transition: var(--transition-fast);
  background: var(--card-bg);
}

.search-box input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.filter-group {
  display: flex;
  gap: 12px;
}

.filter-group select {
  padding: 12px 16px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  background: var(--card-bg);
  cursor: pointer;
  transition: var(--transition-fast);
  min-width: 150px;
}

.filter-group select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* 用户列表 */
.users-table-container {
  background: var(--card-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-light);
  overflow-x: auto;
  margin-bottom: 24px;
  border: 1px solid var(--border-color);
  min-width: 800px;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.users-table th,
.users-table td {
  padding: 16px 15px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  transition: background-color var(--transition-fast);
}

.users-table tr:hover td {
  background-color: rgba(102, 126, 234, 0.02);
}

.users-table th {
  background: #f8fafc;
  font-weight: 600;
  color: var(--text-primary);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-color);
  transition: border-color var(--transition-fast);
}

.users-table tr:hover .user-avatar {
  border-color: var(--primary-color);
}

/* 角色徽章 - 现代化样式 */
.role-badge {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.role-badge.admin {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
}

.role-badge.editor {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  color: white;
}

.role-badge.user {
  background: linear-gradient(135deg, #95a5a6, #7f8c8d);
  color: white;
}

/* 状态徽章 - 现代化样式 */
.status-badge {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all var(--transition-fast);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.status-badge.active {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  color: white;
}

.status-badge.suspended {
  background: linear-gradient(135deg, #f39c12, #e67e22);
  color: white;
}

.status-badge.deleted {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
}

.action-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.action-buttons button {
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 60px;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.edit-button {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
}

.edit-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
}

.status-button.active {
  background: linear-gradient(135deg, #f39c12, #e67e22);
  color: white;
}

.status-button.suspended {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  color: white;
}

.status-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(243, 156, 18, 0.3);
}

.delete-button {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
}

.delete-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3);
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #95a5a6;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 15px;
  opacity: 0.5;
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.pagination button {
  padding: 10px 16px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition-fast);
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.pagination button:hover:not(:disabled) {
  background: #f8fafc;
  border-color: var(--primary-color);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.pagination button.active {
  background: var(--primary-gradient);
  color: white;
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.page-info {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 12px;
  font-weight: 500;
}

/* 对话框 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.dialog {
  background: var(--card-bg);
  border-radius: var(--border-radius);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  animation: dialogFadeIn 0.3s ease-out;
}

@keyframes dialogFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
}

.dialog-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
}

.close-button {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-button:hover {
  color: var(--text-primary);
  background-color: rgba(0, 0, 0, 0.05);
}

.dialog-content {
  padding: 24px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--text-primary);
  font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  transition: var(--transition-fast);
  background: var(--card-bg);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

.cancel-button,
.save-button {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: var(--transition-medium);
  min-width: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.cancel-button {
  background: #f1f5f9;
  color: var(--text-secondary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.cancel-button:hover {
  background: #e2e8f0;
  transform: translateY(-1px);
}

.save-button {
  background: var(--primary-gradient);
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.save-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .users-table-container {
    min-width: auto;
  }
  
  .search-filter {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-group {
    flex-wrap: wrap;
  }
  
  .filter-group select {
    flex: 1;
    min-width: 120px;
  }
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .add-button {
    justify-content: center;
  }
  
  .users-table {
    font-size: 13px;
  }
  
  .users-table th,
  .users-table td {
    padding: 12px 8px;
  }
  
  .user-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  
  .user-avatar {
    width: 36px;
    height: 36px;
  }
  
  .action-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  
  .action-buttons button {
    min-width: auto;
  }
  
  .pagination {
    flex-wrap: wrap;
    gap: 6px;
  }
  
  .pagination button {
    padding: 8px 12px;
    min-width: 36px;
    font-size: 13px;
  }
  
  .page-info {
    margin: 8px 0;
  }
  
  .dialog {
    width: 95%;
    margin: 10px;
  }
  
  .dialog-header,
  .dialog-content {
    padding: 16px;
  }
}
@media (max-width: 1200px) {
  .users-container {
    padding: 0 15px;
  }
  
  .users-table th,
  .users-table td {
    padding: 10px 8px;
    font-size: 14px;
  }
  
  .role-badge,
  .status-badge {
    padding: 2px 6px;
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .search-filter {
    flex-direction: column;
    gap: 15px;
  }
  
  .search-box {
    min-width: auto;
  }
  
  .filter-group {
    width: 100%;
    flex-direction: column;
  }
  
  .users-table-container {
    overflow-x: auto;
  }
  
  .users-table {
    min-width: 800px;
  }
  
  .user-info {
    gap: 6px;
  }
  
  .user-avatar {
    width: 30px;
    height: 30px;
  }
  
  .action-buttons {
    flex-wrap: wrap;
    gap: 3px;
  }
  
  .action-buttons button {
    padding: 4px 8px;
    font-size: 12px;
  }
  
  .pagination {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .users-table th:nth-child(7),
  .users-table th:nth-child(8),
  .users-table td:nth-child(7),
  .users-table td:nth-child(8) {
    display: none;
  }
  
  .add-button {
    width: 100%;
    justify-content: center;
  }
}
</style>